<template>
    <div class="task-container">
         <!-- 左侧面板 - 设备列表 -->
        <div class="left-panel">
            <DeviceList @selectDevice="selectDevice"/>
        </div>
        <!-- 右侧面板 - 数据列表 -->
        <div class="right-panel">
            <DataList :deviceSn="deviceSn" />
        </div>
    </div>
    
</template>
<script setup>
import { ref } from 'vue'
// 导入组件
import DeviceList from "./components/deviceList.vue";
import DataList from './components/DataList.vue';
const deviceInfo = ref(null)
let deviceSn = ref('')
const selectDevice = (item) =>{
  deviceInfo.value = item
  deviceSn.value = item.device_sn
}
</script>

<style lang="scss" scoped>
.task-container {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  display: flex;
  overflow-y: auto;
  padding: 147px 30px 0 30px;
  z-index: 10;
  /* 左侧面板 */
  .left-panel {
    // position: absolute;
    // left: 31px;
    // top: 147px;
    // z-index: 10;
    // width: 404px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 21px;
    animation: slideRight 0.8s ease-out;
    // margin-right: 10px;
  }

  /* 右侧面板 */
  .right-panel {
    // position: absolute;
    // right: 31px;
    // top: 147px;
    // z-index: 10;
    // width: 1380px;
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: 21px;
    animation: slideLeft 0.8s ease-out;
  }

  
}

</style>